import React from 'react'
import { useState,useEffect } from 'react'

function MyComponent() {
    const [visible, setVisible] = useState(false);
    return (
        <>
            {visible && <MyChildComponent />}
            <button onClick={() => setVisible(!visible)}>Toggle Child component visible</button>
        </>
    )
}

const MyChildComponent = () => {
    useEffect(()=>{
        console.log('mounted');
        return ()=>{
            console.log('unmount');
        }
    },[])
    return (
        <div>
            MyChildComponent
        </div>
    )
}

export default MyComponent